<template>
  <!-- 搜索结果页 -->
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar
      title="搜索结果"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div>
      <!-- 23.9加载更多数据 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 当时ArticleItem里用obj接的变量 -->
        <ArticleItem
          v-for="obj in list"
          :key="obj.art_id.toString()"
          :obj="obj"
          :showCloseIcon="false"
        ></ArticleItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem'
import { searchResultListAPI } from '@/api'
export default {
  components: {
    ArticleItem
  },
  data () {
    return {
      page: 1,
      list: [],
      loading: false, // 底部小圆圈
      finished: false // 是否加载完毕(如果为true，以后list再也不会触发load事件)
    }
  },

  methods: {
    // 23.9加载更多数据
    onLoad () { // list组件-网页刚打开时，触底了，调用一次事件
      this.getListFn()
      this.page++
    },
    async getListFn () {
      const [, res] = await searchResultListAPI({
        q: this.$route.params.kw, // kw名要跟router里规则一样
        page: this.page
      })
      // console.log(res)
      this.list = [...this.list, ...res.data.data.results]
      this.loading = false // 小圆圈关闭
      // 23.9加载更多数据
      if (res.data.data.results.length === 0) {
        this.finished = true // 没有更多数据(触底了)，onload事件也不会再执行了
      }

      // van-list组件什么时候会自动触发load事件执行onload方法呢？
      // 当list发现滚动条到达了list内容的底部，自动触发load事件
    }
  }
}
</script>

<style scoped lang="less">
.search-result-container {
  padding-top: 46px;
}
.center-title {
  text-align: center;
}
</style>
